<template>
  <ScrollContainer>
    <div ref="wrapperRef" :class="prefixCls">
      <Tabs tab-position="left" :tabBarStyle="tabBarStyle">
        <template v-for="item in settingList" :key="item.key">
          <TabPane :tab="item.name">
            <component :is="tabs[item.component]" />
          </TabPane>
        </template>
      </Tabs>
    </div>
  </ScrollContainer>
</template>

<script lang="ts" setup>
import { Tabs } from "ant-design-vue";
import { ScrollContainer } from "@/components/Container";
import { settingList } from "./data";
import BaseSetting from "./BaseSetting.vue";
import SecureSetting from "./SecureSetting.vue";
import AccountBind from "./AccountBind.vue";
import MsgNotify from "./MsgNotify.vue";

const TabPane = Tabs.TabPane;
const tabs = {
  BaseSetting,
  SecureSetting,
  AccountBind,
  MsgNotify,
};

const prefixCls = "account-setting";
const tabBarStyle = {
  width: "220px",
};
</script>
<style lang="less">
.account-setting {
  margin: 12px;
  background-color: @component-background;

  .base-title {
    padding-left: 0;
  }

  .ant-tabs-tab-active {
    background-color: @item-active-bg;
  }
}
</style>
